import { h, VNode } from 'snabbdom'
import { DomEditor, IDomEditor, SlateElement } from '@wangeditor/editor'
import { ActivityElement } from './custom-types'
import { ActivityElementTypeName } from './config'

function renderAttachment(elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode {
    const isDisabled = editor.isDisabled()

    // 当前节点是否选中
    const selected = DomEditor.isNodeSelected(editor, elem)

    // 构建 vnode
    const { name = '', href = '' } = elem as ActivityElement

    const vnode = h(
        'span',
        {
            props: {
                contentEditable: false, // 不可编辑
            },
            style: {
                display: 'inline-block',
                margin: '0 3px',
                fontSize: "14px",
                border:
                    selected && !isDisabled
                        ? '2px solid red'
                        // ? '2px solid var(--w-e-textarea-selected-border-color)' 
                        : '2px solid transparent',
                borderRadius: '3px',
                padding: '0 6px',
                backgroundColor: 'rgb(255 119 82)',
                color: '#fff',
                cursor: 'pointer',
            },
            on: {
                click() {
                    // alert(isDisabled)
                    // if (!isDisabled) return
                    if (href) {
                        // window.open(link, '_blank')
                        alert(href)
                    }
                },
            },
        },
        name
    )

    return vnode
}

const conf = {
    type: ActivityElementTypeName,
    renderElem: renderAttachment,
}

export default conf
